<template>
  <div class="app-container">
    <div v-show="!addUserInfo.visible">
      <div class="app-container-flex">
        <div :class="[state.rightBoxShow ? 'layui-col-md8' : 'layui-col-md12']">
          <div class="layui-card">
            <div class="layui-card-body">
              <!-- 条件栏 -->
              <PageFilter
                v-model:query="filterInfo.query"
                :filter-list="filterInfo.list"
              ></PageFilter>

              <!-- 表格 -->
              <table-container
                :refresh="tableInfo.refresh"
                :init-curpage="tableInfo.initCurpage"
                v-model:data="tableInfo.data"
                :api="state.getRolePage"
                :query="filterInfo.query"
                :field-list="tableInfo.fieldList"
                :handle="tableInfo.handle"
                @handleEvent="handleRole"
              />
              <modify
                :table-row="state.tableRow"
                :visible="state.modifyVisible"
                @callback="modifyCallback"
              />
            </div>
          </div>
        </div>

        <div v-if="state.rightBoxShow" class="layui-col-md4 relativeBox">
          <div class="layui-card">
            <!-- icon="iconfont icon-guanbiquanping" -->
            <el-button :plain="true" class="closeBtn" @click="panelClose">
              <el-icon>
                <Close></Close>
              </el-icon>
            </el-button>
            <div class="layui-card-body">
              <jurisdiction
                v-if="state.jurisdictionPanl"
                :table-row="state.selectRow"
                jurisdiction-type="ROL"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <AddUser
      v-if="addUserInfo.visible"
      v-model:visible="addUserInfo.visible"
      :table-row="addUserInfo.tableRow"
      @returnBack="getList"
    />
  </div>
</template>
<script setup name="roleManage">
import { getRolePage, deleteRole } from '@/api/base.js'
import modify from './modify'
import jurisdiction from './jurisdiction.vue'
import AddUser from './addUser'
const { proxy } = getCurrentInstance()
const state = reactive({
  getRolePage: getRolePage,
  modifyVisible: false,
  tableRow: {},
  rightBoxShow: false,
  jurisdictionPanl: false,
  selectRow: {},
  selectRoles: [],
})
const addUserInfo = ref({
  visible: false,
  tableRow: {},
})

// 过滤相关配置
const filterInfo = reactive({
  query: {
    nameLike: '',
    sort: 'create_time desc',
    searchType: 'role',
  },
  list: [
    {
      type: 'button',
      label: '新增',
      btType: 'primary',
      event: editRole,
      show: proxy.$permission('role:add'),
    },
    {
      type: 'button',
      label: '删除',
      event: deleteRoles,
      show: proxy.$permission('role:del'),
      disabled: true,
    },
    {
      type: 'input',
      label: '名称/编码',
      value: 'keyword',
      event: searchRole,
      list: 'originList',
    },
    {
      type: 'button',
      label: '搜索',
      btType: 'primary',
      event: searchRole,
      show: true,
    },
  ],
})
// 表格相关
const tableInfo = reactive({
  refresh: 1,
  initCurpage: 1,
  data: [],
  fieldList: [
    { label: '名称', value: 'name' },
    { label: proxy.$t('code'), value: 'code' },
  ],
  handle: {
    fixed: false,
    label: '操作',
    width: '130',
    btList: [
      {
        label: '关联人员',
        event: addUser,
        show: proxy.$permission('role:addUser'),
      },

      {
        label: '权限',
        event: loadRoles,
        show: proxy.$permission('role:auth'),
      },
      {
        label: '修改',
        event: editRole,
        show: proxy.$permission('role:update'),
      },
      {
        label: '删除',
        event: deleteRoles,
        show: proxy.$permission('role:del'),
      },
    ],
  },
})

onMounted(() => {
  getList()
})
function addUser(row) {
  //关联人员
  addUserInfo.value.visible = true
  addUserInfo.value.tableRow = row
}

// 获取列表
function getList() {
  tableInfo.refresh = Math.random()
}
function editRole(row = {}) {
  if (row) {
    state.tableRow = { ...row }
  } else {
    state.tableRow = {}
  }
  state.modifyVisible = true
}
function deleteRoles(row = {}) {
  let data = []
  if (row && row.id) {
    data.push(row.id)
  } else {
    state.selectRoles.forEach((item) => {
      if (item) {
        data.push(item.id)
      }
    })
  }
  proxy.$handleAPI('delete', deleteRole, data).then((res) => {
    if (res.success) {
      tableInfo.initCurpage = Math.random()
      tableInfo.refresh = Math.random()
      // 删除的是当前右侧的列表数据则清空右侧数据
      if (row.orgId === state.selectRow.orgId) {
        state.selectRow = {}
      }
    }
  })
}
function handleRole(event, data) {
  switch (event) {
    case 'tableCheck':
      state.selectRoles = data
      filterInfo.list[1].disabled = !state.selectRoles.length
      break
  }
}
function searchRole() {
  tableInfo.initCurpage = Math.random()
  tableInfo.refresh = Math.random()
}
function modifyCallback(reload) {
  state.modifyVisible = false
  if (reload) {
    tableInfo.refresh = Math.random()
  }
}
function loadRoles(row) {
  //权限配置
  state.rightBoxShow = true
  state.jurisdictionPanl = true
  state.selectRow = { ...row }
}
function panelClose() {
  //右侧框关闭
  state.rightBoxShow = false
  state.jurisdictionPanl = false
}
</script>

<style scoped lang="scss">
.layui-card {
  background-color: transparent;
  .layui-card-body {
    padding: 0;
  }
}
.relativeBox {
  position: relative;
  height: 100%;
  overflow: hidden;
  margin-left: 20px;
  background: #fff;
}
</style>
